<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>粘性定位</title>
  <style>
    body {
      height: 2000px;
    }

    div.sticky {
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
      padding: 5px;
    }

    /* 在无定位（文档流）和固定定位（参照物是窗口）间来回切换 */
    div.sticky {
      /* position: -webkit-sticky; */
      position: sticky;

      /* 切换的阈值 */
      /* 相对窗口的top为0 */
      top: 50px;   
    }

  </style>
</head>

<body>

  <p>尝试滚动页面。</p>
  <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

  <div class="sticky">我是粘性定位!</div>

  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>


</body>

</html>